<template>
	<view>
		<view class="taskInfoBox">
			<image class="photo" :src="photo"></image>
			<text class="taskName">{{taskName}}</text>
			<view class="biaoqian">
				王者荣耀
			</view>
			<text class="money">￥{{money}} <text class="numa">x {{numa}}个</text> </text>
		</view>
		<view class="tipsBox">
			<text class="frame"></text>
			<text class="choosepay">选择支付方式</text>
		</view>
		<view class="payBox">
			<text class="payMethods">支付方式</text>
			<text class="yinfu">应付金额: <text class="amountPay">￥{{amountPay}}</text></text>
		</view>
		<view @click="payButton(index)" class="paymethodsBox" v-for="(item,index) in payData" :key="index">
			<image class="paymethodsImg" :src="item.paymethodsImg"></image>
			<text class="paymethodsFont">{{item.paymethodsFont}}</text>
			<image class="duihao" v-show="index==num" :src="item.duihao"></image>
		</view>
		<view class="confiremPay">
			确认付款
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				photo:'../../../static/user/photo.png',
				taskName:'任务名称',
				money:'6.80',
				numa:'20',
				amountPay:'136.00',
				payData:[{
					paymethodsImg:'../../../static/user2/zfb.png',
					paymethodsFont:'支付宝',
					duihao:'../../../static/user2/dui.png'
				},
				{
					paymethodsImg:'../../../static/user2/wx.png',
					paymethodsFont:'微信',
					duihao:'../../../static/user2/dui.png'
				}]
			};
		},
		methods:{
			payButton(e){
				this.num=e;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F1F1F1;
		}
     .taskInfoBox{
		 width:750rpx;
		 height:140rpx;
		 background:rgba(255,255,255,1);
		 margin-top: 10rpx;
		 }
		 .photo{
			 width: 100rpx;
			 height: 100rpx;
			 position: absolute;
			 top: 20rpx;
			 left: 30rpx;
		 }
		 .taskName{
			 font-size:32rpx;
			 font-family:PingFang SC;
			 font-weight:bold;
			 color:rgba(51,51,51,1);
			 position: absolute;
			 top: 22rpx;
			 left: 160rpx;
		 }
		 .biaoqian{
			 width:78rpx;
			 height:28rpx;
			 background:rgba(115,34,216,1);
			 opacity:0.5;
			 border-radius:4rpx;
			 font-size:16rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(255,255,255,1);
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 position: absolute;
			 top: 84rpx;
			 left: 160rpx;
		 }
		 .money{
			 font-size: 28rpx;
			 color: #FF3B30;
			 position: absolute;
			 top: 80rpx;
			 left: 264rpx;
		 }
		 .numa{
			 font-size: 28rpx;
			 color: #333333;
			 margin-left: 10rpx;
		 }
		 .tipsBox{
			 width: 710rpx;
			 height: 90rpx;
			 display: flex;
			 align-items: center;
			 margin-left: 20rpx;
		 }
		 .frame{
			 display: block;
			 width:10rpx;
			 height:30rpx;
			 background:rgba(115,34,216,1);
			 border-radius:5rpx;
		 }
		 .choosepay{
			 font-size:28rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(51,51,51,1);
			 margin-top: -5rpx;
			 margin-left: 10rpx;
		 }
		 .payBox{
			 width:710rpx;
			 height:120rpx;
			 background:rgba(255,255,255,1);
			 border-radius:10rpx;
			 margin-left: 20rpx;
			 display: flex;
			 align-items: center;
			 position: relative;
		 }
		 .payMethods{
			 font-size:32rpx;
			 font-family:PingFang SC;
			 font-weight:bold;
			 color:rgba(51,51,51,1);
			 position: absolute;
			 left: 20rpx;
		 }
		 .yinfu{
			 font-size: 32rpx;
			 color: #333333;
			 position: absolute;
			 right: 24rpx;
		 }
		 .amountPay{
			 font-size: 32rpx;
			 color: #FF3B30;
			 margin-left: 10rpx;
		 }
		 .paymethodsBox{
			 width:710rpx;
			 height:120rpx;
			 background:rgba(255,255,255,1);
			 border-radius:10rpx;
			 margin-left: 20rpx;
			 margin-top: 1rpx;
			 display: flex;
			 align-items: center;
			 position: relative;
		 }
		 .paymethodsImg{
			 width: 70rpx;
			 height: 70rpx;
			 position: absolute;
			 left: 20rpx;
		 }
		 .paymethodsFont{
			 font-size:28rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(51,51,51,1);
			 position: absolute;
			 left: 105rpx;
		 }
		 .duihao{
			 width:40rpx;
			 height:40rpx;
			 position: absolute;
			 right: 25rpx;
		 }
		 .confiremPay{
			 width:710rpx;
			 height:90rpx;
			 background:rgba(115,34,216,1);
			 box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
			 border-radius:20rpx;
			 font-size:38rpx;
			 font-family:PingFang SC;
			 font-weight:bold;
			 color:rgba(255,255,255,1);
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 margin-top: 80rpx;
			 margin-left: 20rpx;
			 }
</style>
